<template>
    <view class="card">
      <view class="image-container" @click="navigateToPage">
        <!-- 放置自适应的图片 -->
        <image class="photo" src="/static/qs.jpg" mode="aspectFit" />
        <!-- 图片上的文本 -->
        <view class="overlay-text">嘿嘿</view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'CardComponent',
    methods: {
      // 页面跳转方法
      navigateToPage() {
        // 这里可以根据你的需求调整目标页面路径
        uni.navigateTo({
          url: '/pages/index/index' // 修改为目标页面的路径
        });
      }
    }
  };
  </script>
  
  <style>
  /* 卡片样式 */
  .card {
    width: 100vw; /* 卡片宽度占屏幕的90% */
    height: 70vh; /* 卡片高度占屏幕的90% */
    background-color: rgba(255, 255, 255, 0.8); /* 轻微透明的白色背景 */
    border-radius: 100rpx; /* 圆润的边角 */
    box-shadow: 0 4rpx 20rpx rgb(0, 0, 0);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    margin-top: 100px;
  }
  
  /* 图片容器样式 */
  .image-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /* 图片样式 */
  .photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片裁剪，以保持焦点 */
    opacity: 0.8; /* 轻微透明，突显文字 */
  }
  
  /* 图片上的文本样式 */
  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 40px; /* 更大的字体 */
    font-family: 'Brush Script MT', cursive; /* 手写体，增添浪漫氛围 */
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); /* 更柔和的阴影 */
    text-align: center;
    white-space: nowrap;
    opacity: 0.9;
    letter-spacing: 2rpx; /* 字间距，增强视觉效果 */
  }
  
  /* 小心形图标装饰 */
  .card::before {
    content: '❤️'; /* 在卡片顶部添加心形符号 */
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 50rpx;
    color: #f08d7d; /* 柔和的粉红色 */
  }
  </style>
  